<template>
  <div
    v-if="props.isVisible"
    class="image-comparison-card"
    :style="{ top: position.top, left: position.left, zIndex: zIndex }"
  >
    <el-card class="card-container">
      <!-- 卡片标题 -->
      <div slot="header" class="clearfix">
        <span>图像对比</span>
        <el-button
          class="close-btn"
          icon="el-icon-close"
          @click="closeCard"
          style="float: right; margin-top: -5px"
        ></el-button>
      </div>

      <!-- 图片对比 -->
      <div class="image-comparison">
        <div class="image-container">
          <h3>前时相影像</h3>
          <el-image style="width: 850px" :src="imageUrl1" :fit="'contain'" />
        </div>
        <div class="image-container">
          <h3>后时相影像</h3>
          <el-image style="width: 850px" :src="imageUrl2" :fit="'contain'" />
        </div>
      </div>

      <!-- 字段信息展示 -->
      <el-row class="info" style="width: 1600px;">
        <!-- <el-col :span="8" v-for="(value, key) in filteredData" :key="key">
          <strong>{{ key }}:</strong> {{ value }}
        </el-col> -->
                <el-col :span="8" style="word-break: break-all;"><strong>监测任务名称:</strong> {{ props.data.JCRWMC }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>监测任务代码:</strong> {{ props.data.JCRWDM }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>图斑代码:</strong> {{ props.data.TBDM }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>区域类型:</strong> {{ props.data.YSWTLXMC }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>图斑变化类型:</strong> {{ props.data.TBBHLX }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>监测日期:</strong> {{ props.data.JCRQ }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>图斑面积:</strong> {{ props.data.Area }} m²</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>所在省:</strong> {{ props.data.SHENG }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>所在市:</strong> {{ props.data.SHI }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>所在县:</strong> {{ props.data.XIAN }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>经度:</strong> {{ props.data.JD }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>纬度:</strong> {{ props.data.WD }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>任务完成日期:</strong> {{ props.data.WTFXRQ }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>前时相影像:</strong> {{ props.data.JZSXWXSJ }}</el-col>
                <el-col :span="8" style="word-break: break-all;"><strong>后时相影像:</strong> {{ props.data.JCSXWXSJ }}</el-col>
              </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, computed } from "vue";
const emit = defineEmits(["closeCard"]);
// 接收父组件传递的 props
const props = defineProps({
  hou: String,
  qian: String,
  relatedTaskId: String,
  data: Object,
  isVisible: Boolean,
});

// 控制卡片显示

// 设置卡片的位置
const position = ref({
  top: "150px", // 你可以根据需要调整位置
  left: "350px",
});

// 设置卡片的 z-index 确保它在地图上方
const zIndex = ref(2000);

// 计算图片的 URL
const imageUrl1 = computed(
  () => `http://localhost:3006/images/${props.qian}.jpg`
);
const imageUrl2 = computed(
  () => `http://localhost:3006/images/${props.hou}.jpg`
);

// 过滤出有值的字段
const filteredData = computed(() => {
  const result = {};
  for (const [key, value] of Object.entries(props.data)) {
    if (value && key !== "geom") {
      result[key] = value;
    }
  }
  return result;
});

// 关闭卡片
const closeCard = () => {
  emit("closeCard");
};
</script>

<style lang="scss" scoped>
.image-comparison-card {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.card-container {
  width: 100%;
}

.image-comparison {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.image-container {
  text-align: center;
  flex: 1;
}

.image-container img {
  width: 1050px;
  height: auto;
}

.info {
  margin-top: 20px;
}

.info p {
  margin: 5px 0;
}

.close-btn {
  margin-top: -5px;
}

.el-card {
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
</style>
